<template>
  <el-tabs type="card" v-model:activeKey="activeKey" class="qms-tabs">
    <el-tab-pane :key="0" tab="Visibility"></el-tab-pane>
    <el-tab-pane :key="1" tab="Search"></el-tab-pane>
  </el-tabs>
  <div class="qms-tab-content">
    <QmsForm
      :colSpan="6"
      :formState="formState"
      :formItems="formItems"
      :formRules="formRules"
      @submit="searchData"
    >
    </QmsForm>
    <QmsCard title="IQC List">
      <template #operation>
        <QmsIconButton type="primary" icon="PlusOutlined">Create</QmsIconButton>
        <QmsIconButton type="primary" icon="DeleteOutlined" ghost>Delete</QmsIconButton>
      </template>
      <el-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="{ pageSize: 10 }"
      :scroll="{ y: 480 }"
    >
      <template #nameTitle>{{ t("name") }}</template>
      <template #ageTitle>{{ t("age") }}</template>
      <template #tagsTitle>{{ t("tags") }}</template>
      <template #addressTitle>{{ t("address") }}</template>
      <template #actionTitle>{{ t("action") }}</template>
      <template #tags="{ text: tags }">
        <span>
          <el-tag
            v-for="tag in tags"
            :key="tag"
            :color="
              tag === 'loser'
                ? 'volcano'
                : tag.length > 5
                ? 'geekblue'
                : 'green'
            "
          >
            {{ tag.toUpperCase() }}
          </el-tag>
        </span>
      </template>
      <template #address="{ record }">
        <QmsTableEdit
          :record="record"
          col="address"
          @submit="editAddress"
          component="Input"
          :parameter="{ placeholder: record.address }"
        />
      </template>
      <template #name="{ record }">
        <div v-if="!record.isEdit">
          {{ record.name }}
        </div>
        <div v-else>
          <el-input
            :placeholder="record.name"
            v-model:value="record.name"
          ></el-input>
        </div>
      </template>
      <template #action="{ record }">
        <span>
          <el-button
            type="link"
            v-if="!record.isEdit"
            @click="changeEditStatus(record)"
            >Edit</el-button
          >
          <template v-else>
            <el-button type="link" @click="confirmEdit(record)" size="small"
              >Yes</el-button
            >
            <el-button type="link" @click="cancelEdit(record)" size="small"
              >No</el-button
            >
          </template>
          <el-button type="link">Delete</el-button>
        </span>
      </template>
    </el-table>
    </QmsCard>
   
  </div>
</template>
<script setup lang="ts">
import { ref, UnwrapRef, reactive } from "vue"
import QmsCard from "@/components/Base/card.vue"
import QmsForm from "@/components/Base/Form/index.vue"
import QmsTableEdit from "@/components/Base/Table/edit.vue"
import QmsIconButton from "@/components/Base/iconButton.vue"
import { useI18n } from "vue-i18n"
const { t } = useI18n({})
import store from "@/store"
const pageLoading = ref(store.getters["test/getPageLoading"])
interface FormState {
  fieldA: string
  fieldB: string
  fieldC: boolean
  fieldD: number
  fieldE: number
  fieldL: number
  fieldM: string
}
const formState: UnwrapRef<FormState> = reactive({
  fieldA: "",
  fieldB: "JOe",
  fieldC: true,
  fieldD: 2,
  fieldE: 2,
  fieldL: 23,
  fieldM: "a",
})
const formItems = ref([
  {
    label: {
      zhCN: "参数一",
      enUS: "IQC NO",
    },
    value: "IQC",
    component: "Select",
    parameter: {},
  },
  {
    label: {
      zhCN: "参数二",
      enUS: "PN",
    },
    value: "fieldB",
    component: "Select",
    parameter: {
      options: [{ value: "JOe" }, { value: "Jam" }],
    },
  },
  {
    label: {
      zhCN: "参数四",
      enUS: "Field D",
    },
    value: "fieldD",
    component: "Select",
    parameter: {},
  },
])
const formRules = {
  fieldA: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
}
const dataSource = ref([])
dataSource.value = [...Array(100)].map((_, i) => ({
  key: i + 1,
  name: "JOe",
  age: `${i + 20}`,
  address: `china Beijing district${i + 1}`,
  tags: ["nice", "developer"],
}))

const columns = [
  {
    slots: { title: "nameTitle", customRender: "name" },
    dataIndex: "name",
    key: "name",
  },
  {
    slots: { title: "ageTitle" },
    dataIndex: "age",
    key: "age",
    defaultSortOrder: "ascend",
    sorter: (a: { age: number }, b: { age: number }) => a.age - b.age,
  },
  {
    key: "tags",
    dataIndex: "tags",
    slots: { title: "tagsTitle", customRender: "tags" },
  },
  {
    dataIndex: "address",
    key: "address",
    slots: { title: "addressTitle", customRender: "address" },
  },
  {
    key: "action",
    slots: { title: "actionTitle", customRender: "action" },
  },
]
const activeKey = ref(1)
//修改记录
const editRecord = ref()
const changeEditStatus = (record) => {
  editRecord.value = JSON.parse(JSON.stringify(record))
  record.isEdit = true
}
//提交修改
const confirmEdit = (record) => {
  editRecord.value = JSON.parse(JSON.stringify(record))
  delete record.isEdit
}
//取消提交
const cancelEdit = (record) => {
  record = JSON.parse(JSON.stringify(editRecord.value))
  delete record.isEdit
  console.log(editRecord.value, record)
}
// search调用接口
const searchData = () => {
  console.log(formState, "123")
}
// 修改地址
const editAddress = (record) => {
  console.log(record, dataSource.value)
}
</script>
<style lang="less">
.qms-tabs {
  width: 100%;
  .ant-tabs-bar {
    background: #fff;
    padding: 12px 36px 0;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }
  .ant-tabs-tab {
    margin-right: 4px !important;
    background: #f6f6f9 !important;
    border: 1px solid #d8d8e1 !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
  }
  .ant-tabs-tab-active {
    background: #fff !important;
    border: 1px solid #d8d8e1 !important;
    border-bottom: none !important;
  }
}
.qms-tab-content {
  padding: 17px 20px;
  height: calc(100% - 52px);
  // display: flex;
  // flex-wrap: wrap;
}
</style>